<template>
    <div class="design-item">
        <div class="design-item-controller">
            <div class="design-item-controller-handle">
                <div :class="['design-component-shop-banner-preview', 'shop-banner-type-'+showMethod]">
                    <!--样式1-->
                    <div class="shop-banner-cover" :style="{backgroundImage: 'url(' + (filesNameUrl ? filesNameUrl : defaultShopBanner)+ ')'}">
                        <div class="shop-banner-cover-mask"></div>
                    </div>
                    <div class="shop-banner-inner">
                        <div class="shop-banner-content">
                            <div class="shop-banner-logo">
                                <img :src="defaultImage" >
                            </div>
                            <div class="shop-banner-right-content">
                                <h3 class="shop-banner-right-content-title-middle">店铺名称</h3>
                                <p class="shop-banner-sum-content">
                                    <a><span class="shop-banner-sum-content-total">全部商品999</span></a>
                                    <a><span class="shop-banner-sum-content-total">上新30</span></a>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <slot name="menu"></slot>
        </div>
        <div class="design-item-editor" v-show="show && !showAddMenuGroup">
            <div class="design-component-shop-banner-editor">
                <div class="design-item-editor-title">店铺信息</div>
                <div class="editor-group">
                    <div class="editor-group-label ">显示样式：</div>
                    <div class="editor-group-control">
                        <label v-for="(item , index ) in 4" :class="['nc-radio-wrap',{'nc-radio-checked' : showMethod == index }]" @click="showMethod = index"><span class="nc-radio"><span class="nc-radio-inner"></span></span><span>样式{{item}}</span></label>
                    </div>
                </div>

                <div class="editor-group">
                    <div class="editor-group-label editor-group-label-top">显示样式：</div>
                    <div class="editor-group-control">
                        <div v-if="filesName" class="cover-upload"><img :src="filesNameUrl|ncImage(80,80)"></div>
                        <div :class="[filesName ?'is-uploaded-trigger':'select-pic upload-trigger']" @click="bindSelectImage">
                           <span>+</span>
                        </div>
                        <div class="editor-group-desc">建议尺寸：750x370 像素，尺寸不匹配时，图片将被压缩或拉伸以铺满画面</div>
                    </div>
                </div>

            </div>
        </div>
        <slot name="addMenuGroup" v-if="showAddMenuGroup"></slot>
    </div>
</template>
<script>
    import ncLinkMenu from './link-menu.vue'
    /**
     * 默认的数据格式
     */
    var defaultDataFormat = {
        // 图片名称
        filesName: '',
        // 图片地址
        filesNameUrl: '',
        // 显示方式
        showMethod: 0,
        type: 'shopBanner'
    }
    export default {
        name: "nc-design-item-shop-banner",
        otherInfo: {
            title: '店铺信息',
            type: 'shopBanner',
            group: 2,
            max: 1
        },
        components: {
            'nc-link-menu': ncLinkMenu
        },
        //外部传入参数
        props: {
            show: {
                type: Boolean,
                default: false
            },
            options: {
                type: Object,
                default: null
            },
            cid: {
                type: Number
            },
            showAddMenuGroup: {
                type: Boolean,
                default: false
            }
        },
        /*
         * 自身数据,一定要一个function
         */
        data() {
            let data = !Nc.isEmpty(this.options) ? {
                filesName: this.options.filesName,
                filesNameUrl: this.options.filesNameUrl,
                showMethod: this.options.showMethod,
            } : ($.extend(true, {}, defaultDataFormat))

            let customData = {
                defaultImage :ncGlobal.imgRoot + 'default_image.png' ,
                defaultShopBanner: ncGlobal.imgRoot +'component/default-shop-banner.png'
            }
            return $.extend({}, data, customData)
        },
        computed: {

        },
        watch: {},
        created() {
        },
        mounted() {
        },
        methods: {
            /**
             * 获取当前数据
             */
            getCurrentData () {
                return {
                    filesName: this.filesName,
                    filesNameUrl: this.filesNameUrl,
                    showMethod: this.showMethod,
                    type: this.type
                }
            } ,
            bindSelectImage(){
                var self = this
                Nc.openAlbum({multiSelect:false}, function (picList) {
                    self.filesName = picList[0].filesName
                    self.filesNameUrl = picList[0].filesNameUrl
                })
            }
        }
    };
</script>